<div class="flex-1 grid grid-cols-1 md:grid-cols-3 gap-4">

    <!-- <ngm-member-tree fxFlex="30%" fxFlex.lt-sm="50%" style="height: 300px;"
        [dataSettings]="{
            dataSource: 'UnemploymentModel',
            entitySet: 'Unemployment Rate'
        }" [dimension]="{
            dimension: '[Calendar]'
        }"
        [(ngModel)]="unemploymentCalendar"
        (ngModelChange)="onUnemploymentCalendar($event)">
    </ngm-member-tree>

    <ngm-member-tree fxFlex="30%" fxFlex.lt-sm="50%" style="height: 300px;"
        [dataSettings]="{
            dataSource: 'UnemploymentModel',
            entitySet: 'Unemployment Rate'
        }" [dimension]="{
            dimension: '[Region]'
        }"
        [(ngModel)]="unemploymentRegion"
        (ngModelChange)="onUnemploymentCalendar($event)">
    </ngm-member-tree> -->

    <!-- <div *ngFor="let card of unemploymentCards" fxFlex="calc(33% - 1rem)" fxFlex.lt-sm="calc(50% - 1rem)" fxFlex.xs="100">
        <ngm-analytical-card displayDensity="compact"
            [title]="card.title"
            [dataSettings]="card.dataSettings"
            [chartSettings]="card.chartSettings"
            [chartOptions]="card.chartOptions"
            [options]="{}"
            (slicersChange)="onLinkAnalysis($event)"
        ></ngm-analytical-card>
    </div> -->

    <div *ngFor="let card of cards">
        <ngm-smart-filter *ngIf="card.type === 'SmartFilter'"
            [dataSettings]="card.dataSettings"
            [dimension]="card.dimension"
            [options]="card.options"
        ></ngm-smart-filter>
        <ngm-member-tree *ngIf="card.type === 'MemberTree'" class="h-full"
            [dataSettings]="card.dataSettings"
            [dimension]="card.dimension"
            [options]="card.options"
        >
        </ngm-member-tree>
        <ngm-analytical-card *ngIf="card.dataSettings.chartAnnotation" displayDensity="compact"
            [title]="card.title"
            [dataSettings]="card.dataSettings"
            [chartSettings]="card.chartSettings"
            [chartOptions]="card.chartOptions"
            [options]="{}"
            (explain)="onExplain($event)"
            (slicersChanging)="onLinkAnalysis($event)"
        ></ngm-analytical-card>

        <ngm-analytical-grid *ngIf="card.dataSettings.analytics"
            [appearance]="{displayDensity: DisplayDensity.compact}"
            [title]="card.title"
            [dataSettings]="card.dataSettings"
            [options]="card.options"
            [columns]="card.columns"
            (explain)="onExplain($event)"
            >
        </ngm-analytical-grid>
    </div>
</div>
